<template>
    <div class="warehouse">
      <div class="info-exhibition">
        <div class="info-one">
          <div style="float: left;width: 40%; color:gold;">{{userinfo.username}}（{{userinfo.salutation}}）</div>
          <div style="display: flex;flex: 1;text-align: center;">
            <div style="float:left;width:60%">10胜8败</div>
            <div style="flex:1;">{{userinfo.region}}</div>
          </div>
        </div>
        <div class="info-two">
          <el-tag
            v-for="item in tag.dynamicTags"
            :key="item.name"
            closable
            :type="item.type"
            @close="handleClose(item)">
            {{item.name}}
          </el-tag>
          <el-input
            style="width: 90px;margin-left: 10px;vertical-align: bottom;"
            v-if="tag.inputVisible"
            v-model="tag.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag
          </el-button>
        </div>
        <div class="info-three">
          <div class="func-btn">
            <div style="display:flex;width: 67%;">
              <div style="width: 50%;">
                <el-button type="success" round>上传</el-button>
              </div>
              <div style="flex: 1;">
                <el-button type="warning" round>更改</el-button>
              </div>
            </div>
            <div style="flex: 1;">
              <el-button type="primary" round>图库</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="img-exhibition">
        <swiper :options="swiper.options">
          <!-- slides -->
          <swiper-slide v-for="item in swiper.container" :key="item.id">
            <img class="swiper-img" :src="item.img" :alt="item.id"/>
          </swiper-slide>
          </swiper>
      </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Warehouse',
  data: function () {
    return {
      tag: {
        inputVisible: false,
        inputValue: '',
        newTag: {
          name: '',
          type: 'info'
        },
        dynamicTags: Array
      },
      swiper: {
        options: {
          pagination: {
            el: '.swiper-pagination'
          },
          loop: true,
          autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          effect: 'flip'
        },
        container: [
          {
            id: 0,
            img: require('imgs/hg.jpg')
          }, {
            id: 1,
            img: require('imgs/dan.jpg')
          }, {
            id: 2,
            img: require('imgs/jkson.jpg')
          }, {
            id: 3,
            img: require('imgs/ironMan.jpg')
          }
        ]
      },
      userinfo: Object
    }
  },
  mounted: function () {
    this.getUserInfo()
  },
  activated: function () {
    this.$store.dispatch('changeTabbarState', true)
    this.$store.dispatch('changeTabbarActive', 2)
  },
  methods: {
    clickItem: function (O) {
      console.log(O.idx)
    },
    clickMainBtn: function () {
      console.log('')
    },
    handleClose: function (tag) {
      this.tag.dynamicTags.splice(this.tag.dynamicTags.indexOf(tag), 1)
    },
    showInput: function () {
      this.tag.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm: function () {
      let inputValue = this.tag.inputValue
      if (inputValue) {
        this.tag.dynamicTags.push(inputValue)
        console.log(this.tag.dynamicTags)
      }
      this.tag.inputVisible = false
      this.tag.inputValue = ''
    },
    getUserInfo: function () {
      axios.get('/static/mock/user.json')
        .then(this.getUserInfoSucc)
    },
    getUserInfoSucc: function (res) {
      if (res && res.data && res.data.ret) {
        this.userinfo = res.data.data.userinfo
        this.tag.dynamicTags = this.userinfo.tags
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .warehouse
    width: 100%
    height: 93%
    .info-exhibition
      height: 480px
      .info-one
        display: flex;
        padding-left: 20px
        padding-top: 8px
        height: 50px
        line-height: 50px
      .info-two
        margin: 20px 10px
        height: 180px
        box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.2)
        .el-tag + .el-tag
          margin-left: 10px
        .button-new-tag
          margin-left: 10px
          height: 32px
          line-height: 30px
          padding-top: 0
          padding-bottom: 0
        .input-new-tag
          width: 90px
          margin-left: 10px
          vertical-align: bottom
      .info-three
        height: 200px
        .func-btn
          display: flex
          margin-top: 60px
          height: 110px
          line-height:100px;
          text-align: center;
    .img-exhibition
        margin: 15px 5px
        height: 740px
        width: 740px
        .swiper-container
          height: 100%
          width: 100%
          .swiper-img
            width: 740px
            height: 740px
</style>
